<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有道笔记</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">

    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.slim.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=no"/>
    <style>
        .row div {
            border: solid 0px red;
        }

        body {
            background-color: #eeeeee;
        }

        @media (min-width: 1300px) {
            .container {
                max-width: 1300px;
            }
        }

        .header {
            border-top: solid 3px black;
        }

        .menu {

            background: #0f6674;
        }

        .menu .menu-bar a:link {
            color: white;
        }

        .article-list .detail {
            padding: 0px 10px;
        }

        .article-list .thumb {
            margin: 0px;
            padding: 2px 10px 0 0;
        }

        .article-list .detail .title {
            font-size: 22px;
            color: #e56244;
            margin-bottom: 10px;
        }

        .article-list .detail .info {
            font-size: 14px;
            color: #666666;
            margin-bottom: 10px;
        }

        .article-list .detail .intro {
            font-size: 16px;
            word-break: break-all;
            word-wrap: break-word;
            line-height: 25px;
        }

        .search-bar {
            margin: 0px;
            border: solid 1px #cccccc;
            padding: 10px 0px;
            background-color: #563d7c;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="container" style="height: 80px">
        <div class="row">
            <div class="col-5" style="padding-top: 10px">
                <img src="{{ url_for('static', filename='img/youdao.png') }}" width="230">
            </div>
            <div class="col-7 d-none d-sm-block" style="text-align: right;padding-top: 25px ">
                    <h3>高效办公</h3>
            </div>
            <div class="col-7 d-sm-none " style="text-align: right;padding-top: 15px ">
                <h3>技术博客</h3>
            </div>

        </div>

    </div>

    <div class="menu">
        <div class="container" style="padding: 0">
            <nav class="navbar navbar-expand-lg navbar-dark menu-bar" style="background-color: #0f6674">
                <a class="navbar-brand" href="#">快捷导航</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="/tpye/1-1">python开发</a>
                        <a class="nav-item nav-link" href="/tpye/1-2">java开发</a>
                        <a class="nav-item nav-link" href="/tpye/1-3">测试开发</a>
                        <a class="nav-item nav-link" href="/tpye/1-4">前端学习</a>
                    </div>
                    <div class="navbar-nav ml-auto">
                        <a class="nav-item nav-link" href="#">登录</a>
                        <a class="nav-item nav-link" href="#">注册</a>
                        <a class="nav-item nav-link" href="#">用户中心</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="container" style="margin-top: 20px; ">
        <div class="row">
            <div class="col-sm-9 col-12" style="border: none">
                <div class="col-12" style="padding: 15px 0;">

                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="{{ url_for('static', filename='img/banner-1.jpg') }}" class="d-block w-100"
                                     alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="{{ url_for('static', filename='img/banner-2.jpg') }}" class="d-block w-100"
                                     alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="{{ url_for('static', filename='img/banner-3.jpg') }}" class="d-block w-100"
                                     alt="...">
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                           data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                           data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="col-12" style="border: solid 1px silver;margin: 10px 0px">
                    <div class="col-12 row article-list">
                        <div class="col-sm-3 col-3 thumb d-none d-sm-block">

                            <img src="https://woniuxyopenfile.oss-cn-beijing.aliyuncs.com/woniuxynote/thumb/623.png"
                                 class="img-fluid">
                        </div>
                        <div class="col-sm-9 col-xs-12 detail">
                            <div class="title"><a href="/article/609">10月24日，蜗牛学院第五届程序员节正式开启！</a></div>
                            <div class="info">作者：强哥&nbsp;&nbsp;&nbsp;类别：蜗牛杂谈&nbsp;&nbsp;&nbsp;
                                日期：2020-10-21 11:14:01&nbsp;&nbsp;&nbsp;阅读：0 次&nbsp;&nbsp;&nbsp;消耗积分：0 分
                            </div>
                            <div class="intro">
                                各位老铁，大家好~不知不觉又是一年现在距离2021年还有71天距离春节还有113天距离蜗牛学院第五届程序员节仅剩3天以往这个时间我们早就给每一位毕业小蜗牛发邀请 ...
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12" style="height: 200px;border: solid 1px silver;margin: 10px 0px">文章2</div>
                <div class="col-12" style="height: 200px;border: solid 1px silver;margin: 10px 0px">文章3</div>
                <div class="col-12" style="height: 200px;border: solid 1px silver;margin: 10px 0px">文章4</div>

            </div>
            <div class="col-sm-3 col-12" style="border: none;padding-right: 0px;padding-top: 15px">
                <div class="col-12 search-bar row ">
                    <input type="text" id="keyword" placeholder="请输入关键字">
                    <div class="col-4">
                        <button type="button" class="btn btn-primary">搜索</button>
                    </div>
                </div>
                <div class="col-12" style="height: 350px;border: solid 2px silver;margin: 10px 0px">推荐</div>
                <div class="col-12" style="height: 350px;border: solid 2px silver;margin: 10px 0px">推荐</div>
            </div>

        </div>
    </div>

    <div class="container-fluid" style="height: 100px;border: solid 2px silver "></div>
</body>
</html>